<template>
  <div>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
    >
      <div class="zidingyi-div">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="formData" ref="form" :rules="rules" label-width="110px">
              <el-row :gutter="30">
                <el-col :span="item.spanWidth || 8" v-for="item in popUpdata" :key="item.key">
                  <el-form-item :label="item.label" :prop="item.key">
                    <div class="content-divform">
                      <el-input
                        v-model="item.value"
                        placeholder="请输入"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                        v-if="item.type === 'input'"
                      />

                      <el-input
                        v-model="item.value"
                        type="number"
                        placeholder="请输入"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                        v-if="item.type === 'inputNum'"
                      />

                      <!-- 字典选择框 -->
                      <template v-else-if="item.type === 'dict'">
                        <el-select
                          clearable
                          v-model="item.value"
                          placeholder="请选择"
                          :disabled="item.disabled || type === 'details'"
                          :multiple="item.multiple"
                          @change="dictChange($event,item)"
                        >
                          <el-option
                            v-for="(item, index) in filterList(item.dictName)"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </template>

                      <el-radio-group
                        v-model="item.value"
                        v-else-if="item.type === 'radio'"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                      >
                        <el-radio
                          :label="data.value"
                          v-for="(data, index) in filterradioList(item)"
                          :key="index"
                        >{{ data.label }}</el-radio>
                      </el-radio-group>

                      <el-input
                        v-if="item.value == item.showValue && item.extraObj"
                        v-model="item.extraObj.value"
                        type
                        placeholder="请输入"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                      />

                      <el-checkbox-group
                        v-else-if="item.type === 'checkboxgroup'"
                        v-model="item.value"
                        @change="abc"
                      >
                        <el-checkbox
                          v-for="val in item.options"
                          :key="val.value"
                          :disabled="item.disabled"
                          :label="val.value"
                        >{{ val.label }}</el-checkbox>
                      </el-checkbox-group>

                      <el-input
                        v-model="item.value"
                        type="textarea"
                        placeholder="请输入"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                        v-else-if="item.type === 'textarea'"
                      />

                      <el-date-picker
                        v-model="item.value"
                        :type="item.genre"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                        placeholder="选择日期"
                        v-else-if="item.type === 'time'"
                        :value-format="inputFormat(item.genre)"
                      ></el-date-picker>

                      <el-select
                        clearable
                        v-model="item.value"
                        placeholder="请选择"
                        :disabled="item.disabled || type === 'details'"
                        filterable
                        v-else-if="item.type === 'select'"
                        :multiple="item.multiple"
                      >
                        <el-option
                          v-for="data in item.options"
                          :key="data.value"
                          :label="data.label"
                          :value="data.value"
                        />
                      </el-select>

                      <el-input
                        v-model="item.secondValue"
                        :disabled="item.disabled"
                        :readonly="item.readonly || type === 'details'"
                        placeholder="请输入"
                        v-if="item.label === '隔离类型' && item.value === 5"
                      />
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="日常监测" name="second">
            <slot name="custom"></slot>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" v-if="activeName === 'first'">
        <el-button v-if="type === 'add'" type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 * @param {string} footerState   // 底部操作按钮  `
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from '@/utils';

export default {
  name: 'hotelDialog',
  inject: ['initList'],
  props: {
    // form表单数据
    popUpdata: {
      type: Array,
      default: () => {
        return [{ value: [] }];
      },
    },
    title: {
      type: String,
      default: '查看',
    },
    width: {
      type: String,
      default: '50%',
    },
    footerState: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      activeName: 'first',
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {},
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    dictChange(val, data) {
      if (data.extraObj) {
        data.extraObj.value = null
      }
    },
    abc(val) {
      console.log(val);
    },
    handleClick(tab, event) {
      this.$emit('handleClick')
      console.log(tab, event);
    },
    // 日期格式化
    inputFormat(value) {
      if (
        ![
          'date',
          'datetime',
          'daterange',
          'datetimerange',
          'year',
          'month',
        ].includes(value)
      )
        return '';
      switch (value) {
        case 'date':
          return 'yyyy-MM-dd';
        case 'daterange':
          return 'yyyy-MM-dd';
        case 'month':
          return 'MM';
        case 'year':
          return 'yyyy';
        default:
          return 'yyyy-MM-dd HH:mm:ss';
      }
    },
    filterradioList(value) {
      if (value.dictName) {
        return getDict(value.dictName);
      }
      return value.options;
    },
    filterList(name) {
      return getDict(name);
    },
    // 更改弹窗状态
    async changeVisible() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 提交新增
    async save() {
      this.$emit('submit');
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss">
.zidingyi-div {
  .el-form {
    .el-form-item__content {
      .content-divform {
        display: flex;
        height: 36px;
        align-items: center;
        .el-radio-group {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
  .el-tab-pane {
    .tabs-ul {
      display: flex;
      li {
        padding: 15px 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        border-right-width: 0;
      }
      li:last-of-type {
        border-right-width: 1px;
      }
      .active {
        background: #2f54eb;
        color: white;
      }
    }
    #myChart {
      width: 100%;
      height: 400px;
    }
    .history-div {
      .title {
        background: #e4f1f9;
        margin: 10px 0;
        padding: 10px 20px;
        color: #1a92f1;
        font-weight: bold;
      }
      .history-detail {
        margin-top: 10px;
        .timer {
          color: #1a92f1;
        }
        .heat {
          color: #3ad47e;
        }
        span {
          font-weight: bold;
          margin-right: 10px;
          span {
            font-weight: 500;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
